<!DOCTYPE html>
{% load staticfiles %}
<html>
    <head>
        <meta charset="utf-8">
        <title>{{ article.title }}</title>
        <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="{% static 'css/detail.css' %}"  media="screen" title="no title" charset="utf-8">
    </head>
    <body>
        <div class="ui inverted top fixed menu borderless red menu">
            <div class="header item">
                <div class="ui image">
                    <a href="/index/">
                    <img src="{% static 'images/tenlogo.png' %}" alt="">
                    </a>
                </div>
            </div>

            <div class="right menu">
                {% if request.user.is_authenticated %}
                <a href="/myinfo/">
                    <div class="item">
                        <h5 class="ui inverted header">
                            <div class="ui mini circular image">
                            {% if request.user.belong_to.avatar %}
                                <img src="/media/{{ request.user.belong_to.avatar }}" alt="">
                            {% else %}
                                <img src="{% static 'image/default.jpg' %}" alt="">
                             {% endif %}
                            </div>
                            <span>{{ request.user.username }}</span>
                        </h5>
                    </div>
                </a>

                    <div class="item">
                        <a href="{% url 'logout' %}" class="ui inverted circular button">Logout</a>
                    </div>

                {% else %}

                    <div class="item">
                        <a href="{% url 'login' %}" class="ui inverted circular button">Signup/Login</a>
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="ui vertical inverted detail segment" style="background-image: url({% static 'images/detail.jpg' %})"></div>

        <div class="ui basic segment container" style="width:700px;border:none;box-shadow:none;margin-top:50px;">
            <h1 class="ui header">{{ article.title }}</h1>
            <i class="icon grey unhide"></i>
            <span style="color:#bbbbbb">{{ article.views }}</span>
            <span class="" style="color:rgb(226, 226, 226)">|</span>
            <i class="icon grey checkmark"></i>
            <span style="color:#bbbbbb">{{ article.likes }} people got it</span>
            
            <p>
                {{ article.content }}
            </p>
            <div class="ui divider"></div>
            <form class="ui form" action="{% url 'vote' article.id %}" method="post">
                {% csrf_token %}

                <button class="ui  red tiny button" type="submit" name="vote" value="like" >
                    <i class="icon checkmark"></i>
                    Get it!
                </button>

                <button class="ui  tiny button" type="submit" name="vote" value="dislike" >
                    <i class="icon bomb"></i>
                    Hmmm...
                </button>
            </form>
        </div>


        <!-- Comments&Form's here -->
        <div class="ui segment container" style="width:700px;border:none;box-shadow:none">
            <h3 class="ui horizontal  divider header" style="">Comments</h3>
            <div class="ui comments" style="border:none">
                {% for comment in article.under_comments.all %}
                    <div class="comment">
                        <div class="avatar">
                            <img src="http://semantic-ui.com/images/avatar/small/matt.jpg"  alt="" />
                        </div>
                        <div class="content">
                            <a href="#" class="author">{{ comment.name }}</a>
                            <div class="metadata">
                                <div class="date">2 days ago</div>
                            </div>
                            <p class="text" style="font-family: 'Raleway', sans-serif;">
                                {{ comment.comment }}
                            </p>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="ui divider"></div>
            <form class="ui error tiny form" action="{% url 'comment' article.id %}" method="post">
                {% if form.errors %}
                    <div class="ui error message">
                        {{ form.errors }}
                    </div>
                    {% for field in form  %}
                        <div class="{{ field.errors|yesno:'error, ' }} field">
                            {{ field.label }}
                            {{ field }}
                        </div>
                    {% endfor %}

                {% else %}
                    {% for field in form  %}
                        <div class="field">
                            {{ field.label }}
                            {{ field }}
                        </div>
                    {% endfor %}

                {% endif %}



                {% csrf_token %}
                <button type="submit" class="ui red button" >Click</button>
            </form>

        </div>
    </body>
</html>